import React,{FC,ReactNode} from 'react';

import { Layout ,Menu} from 'antd';

import style from './index.less';

import {useSelector,UserModelState,Link,useLocation} from 'umi';

import menuList from '@/utils/menu';

import {ImenuList} from '@/interface/user';

const { Header,Sider, Content } = Layout;

const { SubMenu } = Menu;


interface Iprops{
    children:ReactNode
}

const Main:FC<Iprops> = (props) => {

    const {userMenu} = useSelector((model:{user:UserModelState}) => model.user);

    console.log("userMenu",userMenu);

    const {pathname} = useLocation();

    console.log(location);

    let defaultOpen:any = menuList.find(item => {
        return item.children.findIndex(val => val.path === pathname) != -1
    })

    console.log("defaultOpen",defaultOpen)

    return <Layout>
        <Header>
            <span className={style.title}>八维考试管理系统</span>
            <div>

            </div>
        </Header>
        <Layout>
            <Sider>
                {defaultOpen && <Menu
                    defaultSelectedKeys={[pathname]} //高亮的选项
                    defaultOpenKeys={[defaultOpen.title]} //打开的submenu
                    mode="inline"
                    theme="dark"
                    >
                        {userMenu.map(item => item.children.length > 0 && <SubMenu icon={<item.meta.icon/>} key={item.title} title={item.title}>
                            {item.children.map(val => val.meta.isShow && <Menu.Item key={val.path}>
                                <Link to={val.path}>{val.title}</Link>
                            </Menu.Item>)}
                        </SubMenu>)}
                </Menu>}
            </Sider>
            <Content>{props.children}</Content>
        </Layout>
    </Layout>
}


export default Main
